<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="/js/rem.js" type="text/javascript"></script>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="telephone=no" name="format-detection">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <link rel="stylesheet" href="/css/common.css" type="text/css">
    <link rel="stylesheet" href="/css/read.css" type="text/css">
    <title>精品阅读</title>

</head>
<body>
<div id="main">
    <div class="read_container">
        <div class="read_content" th:each="article:${articles}">
            <p class="read_title"><span th:text="${article.getARTICLE_TITLE()}">《短歌行》</span>  <button type="button" th:onclick = "|javascript:getActivityDetails( '${article.getID()}' )|">朗读</button></p>
            <p class="read_sub" th:text="${article.getWORK_CONTENT()}">朗读内容朗读内容朗读内容朗读内容朗读内容朗读内容朗读内容朗读内容朗读内容
                朗读内容朗读内容朗读内容朗读内容朗读内容朗读内容朗读内容</p>
            <span class="read_author">作者：<span th:text="${article.getAUTHOR()}">曹操</span>&nbsp;&nbsp;&nbsp;&nbsp;字数：<span th:text="${article.getWORD_COUNT()}">568字</span></span>
            <span style="display: none" class="active_id" th:text="${article.getACTIVITY_ID()}"></span>
            <span style="display: none" class="user_id" th:text="${article.getUSER_ID()}"></span>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript">
    function getActivityDetails(id){
        var activity_id  = $(".active_id").eq(0).text();
        console.log(activity_id+"activity_id");
        var user_id  = $(".user_id").eq(0).text();
        console.log(user_id+"user_id");
        window.location.href="getActicleById?ID="+id+"&user_id=" + user_id + "&activity_id=" + activity_id
    }
</script>
</html>